<template>
	<view>
		<view class="navbar" :style="{height: height}">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="navbar-header" >
				<!-- <view class="left" @click="$mRouter.back()"> -->
				<view class="left" @click.stop="back">
					<fui-icon name="arrowleft" size="50" :color="textColor" ></fui-icon>
				</view>
				{{ title }}
			</view>
			<view class="u-flex u-row-between u-m-t-40" >
				<view class="u-flex" v-if="image || status" style="height: 80rpx">
					<image :src="image" style="width: 51rpx;height: 41rpx;margin-right: 15rpx;margin-top: 5rpx;" mode=""></image>
					<text style="font-size: 36rpx;" v-if="!orderOffline">{{ status }}</text>
					<text style="font-size: 36rpx;" v-else>待确认</text>
				</view>
				<view v-else>
					<slot name="left"></slot>
				</view>
				<view class="u-flex">
					<view class="yx-bt" v-if="btText != ''" style="margin-right: 20rpx;" @click="btClick">
						{{ btText }}
					</view>
					<slot v-else name="right"></slot>
				</view>
			</view>
		</view>
	</view> 
</template>
 
<script>
	let systemInfo = uni.getSystemInfoSync();
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			status: {
				type: String,
				default: '',
			},
			image: {
				type: String,
				default: ''
			},
			btText: {
				type: String,
				default: ''
			},
			expire: {
				type: String,
				default: ''
			},
			isOffline:{
				type: Boolean,
				default: false
			},
			orderOffline:{
				type: Boolean,
				default: false
			},
			isPayOrder:{
				type: Boolean,
				default: false
			},
			paymentMethod:null
		},
		data(){
			return {
				statusBarHeight: systemInfo.statusBarHeight
			}
		},
		computed: {
			height() {
				// #ifdef APP-PLUS
					return (this.statusBarHeight+240)+'rpx'
				// #endif
				// #ifndef APP-PLUS
					return '240rpx'
				// #endif
			}
		},
		onLoad() {
			console.log(this.btText)
		},
		methods: {
			btClick() {
				this.$emit('btClick')
			},
			back() {
				console.log('发送back');
				 this.$emit('back');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		position: fixed;
		width: 100%;
		height: 270rpx;
		background-image: linear-gradient(-90deg,#ffbb1a,#ffbb1a);
		/* padding: 0 35rpx; */
		padding-left: 35rpx;
		padding-right: 18rpx;
		/* #ifdef H5 */
		padding-top: 38.5rpx;
		/* #endif */
		font-size: 36rpx;
		z-index: 102;
		color: #333;
		text {
			color:#333;
		}
		.navbar-header {
			text-align: center;
			.left {
				position: absolute;
				// float: left;
				left: 35rpx;
			}
		}
	}
	.yx-bt {
		width: 200rpx;
		height: 80rpx;
		border: 1rpx solid #333;
		border-radius: 40px;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
	}
</style>
